<template>
    <!-- 主题类型：链接 -->
    <div class="list-link-component-container">
        <div class="list-link-component-item-single" v-if="info.content.coverType==4 || info.content.coverType==1">
            <!-- 单图或无图 -->
            <div class="list-link-component-item-single-bob">
                <a class="list-link-component-title-single" :href="info.content.shareUrl">
                    {{info.content.title}}
                </a>
                <div class="single-component-takeup"></div>
                <router-link class="list-link-component-info-single"
                             :to="{name: 'Index', params: {channelid: info.content.channelId}}">
                    <img class="list-link-component-info-img" src="../assets/images/look.png"/>
                    {{info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.displayTime)}}
                </router-link>
            </div>
            <a class="list-link-component-img-single" :href="info.content.shareUrl" v-if="info.content.linkCover">
                <img v-lazy="info.content.linkCover + '?x-oss-process=image/resize,w_120'"/>
            </a>
            <div class="clearBoth"></div>
        </div>
        <div class="list-link-component-item-big" v-if="info.content.coverType==2">
            <!-- 大图 -->
            <a class="list-link-component-title-big" :href="info.content.shareUrl">
                {{info.content.title}}
            </a>
            <a class="list-link-component-img-big" :href="info.content.shareUrl" v-if="info.content.coverType==2">
                <img v-lazy="info.content.linkCover + '?x-oss-process=image/resize,w_400'"/>
            </a>
            <router-link class="list-link-component-info-big"
                         :to="{name: 'Index', params: {channelid: info.content.channelId}}">
                <div class="floatL">
                    <img class="list-link-component-info-img" src="../assets/images/look.png"/>
                    {{info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.displayTime)}}
                </div>
                <div class="clearBoth"></div>
            </router-link>
        </div>
        <div class="list-link-component-item-triple" v-if="info.content.coverType==3">
            <!-- 三图 -->
            <a class="list-link-component-title-triple" :href="info.content.shareUrl">
                {{info.content.title}}
            </a>
            <a class="list-link-component-img-triple" :href="info.content.shareUrl"
               v-for="(pic,index) in info.content.linkCover.split(',')">
                <img v-lazy="pic + '?x-oss-process=image/resize,w_150'"/>
            </a>
            <router-link class="list-link-component-info-triple"
                         :to="{name: 'Index', params: {channelid: info.content.channelId}}">
                <div class="floatL">
                    <img class="list-link-component-info-img" src="../assets/images/look.png"/>
                    {{info.content.channelName}}&nbsp;&nbsp;{{this.toCommonTime(info.content.displayTime)}}
                </div>
                <div class="clearBoth"></div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        }
    }
</script>

<style>
    .list-link-component-container {
        width: 100%;
    }

    .list-link-component-item-single,
    .list-link-component-item-big,
    .list-link-component-item-triple {
        width: 100%;
        padding: 0.4rem 0;
        margin: 0.4rem auto;
        border-bottom: 0.06rem solid #EDEDED;
        position: relative;
    }

    .list-link-component-item-single-bob {
        width: 60%;
        float: left;
    }

    .list-link-component-title-single,
    .list-link-component-title-big,
    .list-link-component-title-triple {
        width: 100%;
        font-size: 1.0rem;
        line-height: 1.3rem;
        color: #444444;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-decoration: none;
    }

    /* 单图模式下标题、介绍内容左浮动 */
    .list-link-component-title-single {
        /*height: 3.5rem;*/
    }

    .list-link-component-info-single,
    .list-link-component-info-big,
    .list-link-component-info-triple {
        font-size: 0.5rem;
        color: #999999;
        line-height: 1.1rem;
        display: block;
        text-decoration: none;
    }

    /* 单图模式下标题、介绍内容左浮动 */
    .list-link-component-info-single,
    .list-link-component-info-big,
    .list-link-component-info-triple {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-link-component-info-img {
        height: 0.9rem;
        vertical-align: text-bottom;
    }

    .list-link-component-img-single {
        display: block;
        width: 6.9rem;
        height: 4.6rem;
        float: right;
    }

    .list-link-component-img-big {
        display: block;
        width: 100%;
        margin: 0.3rem auto;
        padding-bottom: 40%;
        /*float: left;*/
        position: relative;
    }

    .list-link-component-img-triple {
        width: 32.333%;
        margin: 0.3rem 0.5%;
        padding-bottom: 21.566%;
        float: left;
        position: relative;
    }

    .list-link-component-img-single img {
        width: 100%;
        height: 100%;
    }

    .list-link-component-img-triple img, .list-link-component-img-big img {
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
    }
</style>